<template>
  <div>
    <el-table
      :data="thirdTableData"
      :default-sort="{ prop: 'dayAvg', order: 'descending' }"
      height="360"
      size="small"
      :row-style="{ 'background-color': 'transparent' }"
      :cell-style="{ background: 'transparent' }"
      :header-cell-style="{
        'background-color': '#283979',
        border: 'none',
        'line-height': '28px',
        'text-align': 'center',
      }"
      style="width: 100%"
    >
      <el-table-column
        prop="area"
        align="center"
        width="120"
        :show-overflow-tooltip="true"
        label="网点"
      >
      </el-table-column>
      <el-table-column prop="avgConsum"    width="100" align="center" sortable label="日均用电">
      </el-table-column>
      <el-table-column prop="maxConsum"    width="100" align="center" sortable label="最大用电">
      </el-table-column>
      <el-table-column prop="minConsum"   width="100"  align="center" sortable label="最小用电">
      </el-table-column>
      <el-table-column
        prop="lengthToDay"
        align="center"
        sortable
        label="当天时长/用电(H/kWh)"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.todayHour}}/{{scope.row.todayConsum}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="lengthToWork"
        align="center"
        sortable
        label="当周时长/用电(H/kWh)"
      >
      <template slot-scope="scope">
          <span>{{ scope.row.weekHour}}/{{scope.row.weekConsum}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="lengthToMonth"
        align="center"
        sortable
        label="当月时长/用电(H/kWh)"
      >
      <template slot-scope="scope">
          <span>{{ scope.row.monthHour}}/{{scope.row.monthConsum}}</span>
        </template>
      </el-table-column>
    
    </el-table>
    <div style="display: inline-block; float: right; margin-right: 10px">
      <el-pagination
        :page-size="6"
        layout="total, prev, pager, next"
        :total="thirdTableDatalength"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import ajax from "@/utils/ajax";
export default {
  data() {
    return {
      thirdTableDatalength:-1,
      thirdTableData: [
        {
          addres: "丰泽新秀社区",
          position: "丰泽新秀社区1#口",
          dayAvg: 120, 
          max: 180,
          min: 50, 
          lengthToDay: 3,
          lengthToDayAvg: 2, 
          lengthToWork: 20, 
          lengthToWorkAvg: 7,
          lengthToMonth: 86,
          lengthToMonthAvg: 200,
        },

        {
          addres: "泉州银行泉秀支行",
          position: "泉秀支行灯荣路11号",
          dayAvg: 22,
          max: 31,
          min: 11,
          lengthToDay: 2,
          lengthToDayAvg: 2,
          lengthToWork: 13,
          lengthToWorkAvg: 7,
          lengthToMonth: 57,
          lengthToMonthAvg: 200,
        },
        {
          addres: "泉州大洋百货",
          position: "大洋百货5层",
          dayAvg: 2006,
          max: 3400,
          min: 1234,
          lengthToDay: 5,
          lengthToDayAvg: 2, 
          lengthToWork: 37,
          lengthToWorkAvg: 7, 
          lengthToMonth: 142,
          lengthToMonthAvg: 200, 
        },
        {
          addres: "幸福大厦",
          position: "辛福街辛福大厦1楼",
          dayAvg: 600,
          max: 1500,
          min: 200,
          lengthToDay: 7,
          lengthToDayAvg: 2, 
          lengthToWork: 46,
          lengthToWorkAvg: 7, 
          lengthToMonth: 208,
          lengthToMonthAvg: 200, 
        },
        {
          addres: "中心客运站",
          position: "大厅总控空开",
          dayAvg: 15420,
          max: 65024,
          min: 9868,
          lengthToDay: 2,
          lengthToDayAvg: 2, 
          lengthToWork: 14,
          lengthToWorkAvg: 7, 
          lengthToMonth: 56,
          lengthToMonthAvg: 200, 
        },
      ],
    };
  },
  props: {
    querytime: {
      type: String,
    },
    queryregion: {
      type: [Number, String],
    },
  },
  mounted() {
     this.getOrganNonworkDetail();
  },
  methods: {
    getOrganNonworkDetail() {
      ajax.get({
        url: this.$API.getOrganNonworkDetail+"?branchId="+this.queryregion +"&date=" + this.querytime.slice(0, 10),
        
        success: (response) => {
          let self = this;
          self.thirdTableData = response.data;
          self.thirdTableDatalength= response.data.length
        },
      });
    },
  },
  watch: {
    querytime(newVal, oldVal) {
      // console.log(newVal.slice(0, 10));
      // console.log(oldVal);
      this.getOrganNonworkDetail();
    },
    queryregion(newVal, oldVal) {
      // console.log(newVal);
      // console.log(oldVal);
      this.getOrganNonworkDetail();
    },
  },
};
</script>
<style scoped>
.el-table::before {
  height: 0px;
}
.el-table,
.el-table__body-wrapper,
.el-table__body-wrapper {
  background: initial;
}
</style>